<!DOCTYPE html>
<html id="printfull">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title data-bind="text: pageTitle"></title>
		
		<!-- JQuery -->
		<script type="text/javascript" src="libs/jquery-2.1.3.min.js"></script>	

		<!-- Knockoutjs -->
		<script type="text/javascript" src="libs/knockout-3.2.0.js"></script>
		
		<!-- Bootstrap -->
		<script type="text/javascript" src="libs/bootstrap-3.3.1-dist/js/bootstrap.min.js"></script>
		<link href="libs/bootstrap-3.3.1-dist/css/bootstrap.min.css" rel="stylesheet">		
						
				
		<script>
					
		</script>
		
		<style type="text/css">
@media(min-width:0px) {
	#receptenListId {
		height:80vh; 
		overflow:auto;
	}
}

@media(min-width:992px) {
	#receptenListId {
		height:80vh; 
		overflow:auto;
	}
}

.recepten-header {
    padding: 5px 15px;
    position: relative;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.recepten-filter {
    background-color: #6f5499;
    background-image: linear-gradient(to bottom, #563d7c 0px, #6f5499 100%);
    background-repeat: repeat-x;
    padding: 5px 15px;
    position: relative;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}


#success, #error {
    font-size: 1em;
    margin-top: 10px;
    padding: 2px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #999;
}

#error {
    background-color: #d9534f;
    border-color: #d43f3a;
    color: #fff;   
}		

#success {
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #fff;   
}		


		</style>
		
			
	</head>
	<body>
		<div id="header" class="recepten-header hidden-print">
			<div class="container">
				<h2>Recepten Frida Vandewynckel</h2>
			</div>
		</div>
		
		<div id="filter" class="recepten-filter">
			<div class="container-fluid">
				<div class="row hidden-print">
					<div class="col-md-5">
						<div class="well well-sm">
							<div>Filter bestaande recepten:  <span data-bind="text: $root.gefilterdeRecepten().length"/></span>/<span data-bind="text: $root.beschikbareRecepten().length"/></div>
							<div class="row">						
								<div class="col-xs-4">
									<h4>Categorie</h4>
									<div class="btn-group">									
										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
											<span data-bind="text: $root.selectedCategorieButton().name"></span> <span class="caret"></span>
										</button>
										<ul class="dropdown-menu" role="menu" data-bind="foreach:$root.categorieButtons">
											<li data-bind="css: {active: selected},click: $root.selectCategorieButton"><a href="#"><span data-bind="text: name"></span></a></li>									
										</ul>
									</div>
								</div>
								<div class="col-xs-4">
									<h4>Warm of koud?</h4>								
									<div class="btn-group">									
										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
											<span data-bind="text: $root.selectedTempButton().name"></span> <span class="caret"></span>
										</button>
										<ul class="dropdown-menu" role="menu" data-bind="foreach:$root.tempButtons">
											<li data-bind="css: {active: selected},click: $root.selectTempButton"><a href="#"><span data-bind="text: name"></span></a></li>									
										</ul>
									</div>
								</div>							
								<div class="col-xs-4">
									<h4>Vis of vlees?</h4>
									<div class="btn-group">
										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
											<span data-bind="text: $root.selectedSoortButton().name"></span> <span class="caret"></span>
										</button>
										<ul class="dropdown-menu" role="menu" data-bind="foreach:$root.soortButtons">
											<li data-bind="css: {active: selected},click: $root.selectSoortButton"><a href="#"><span data-bind="text: name"></span></a></li>									
										</ul>
									</div>
								</div>	
							</div>
							<div class="row" style="padding: 10px">								
								<div class="col-xs-12 pull-right">
									Titel bevat <input type="text" data-bind="textInput: $root.selectedTitel"/>
								</div>
							</div>							
							<div class="row" style="padding: 10px">								
								<div class="col-xs-3 pull-right">
									<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-bind="click:$root.resetFilter">Reset</button>
								</div>
							</div>
						</div>					
						<div class="">
							<button type="button" class="btn btn-primary" data-bind="click:$root.addNewRecept">Nieuw recept aanmaken</button>
						</div>
					</div>
					<div class="col-md-7">
						<div id="receptenListId" class="well well-sm" data-bind="style: { height: $root.selectedRecept() ? '30vh' : '80vh'}">
							<table class="table table-striped table-condensed">
								<thead>
										<tr>
											<th>Categorie</th>
											<th class="">Titel</th>
										</tr>
								</thead>
								<tbody data-bind="foreach: gefilterdeRecepten">
									<tr>
										<td><span data-bind="text: categorie"></span></td>
										<td>
											<button data-bind="click:$root.selectRecept">
												<span data-bind="text: titel" style="color:#428bca"></span>
											</button>
											<!-- ko if: (typeof changed != 'undefined') -->
											<span class="glyphicon glyphicon-floppy-save" aria-hidden="true" data-toggle="tooltip" title="Recept aangepast in deze sessie"></span>
											<!-- /ko -->
											
										</td>																				
									</tr>
								</tbody>							
							</table>
						</div>					
					</div>
				</div>
			</div>			
		</div>
		<div class="container">
			<!-- ko if: $root.selectedRecept() -->
			<div class="row">
				<div class="col-md-12">
					<div class="col-xs-12" id="error" data-bind="flash: lastError"></div>
					<div class="col-xs-12" id="success" data-bind="flash: lastSuccess"></div>
					<div class="" data-bind="template: {name: selectedView() ,if:$root.selectedRecept(), data: $root.selectedRecept()}"></div>
				</div>								
			</div>
			<!-- /ko -->
		</div>
		
		<script id="view" type="text/html">
			<div class="container">
				<div class="row">
					<div class="col-xs-8">
						<h2><span data-bind="text:titel"></span></h2>
					</div>
					<div class="col-xs-4 hidden-print">
						<h2>
							<button data-bind="click: function() {$root.setViewMode('edit')}" data-toggle="tooltip" title="Open dit recept in editeer modus.">
								<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
							</button>
							<!-- ko if:receptid()>0 -->
							<button data-bind="click: $root.delete" data-toggle="tooltip" title="Verwijder dit recept.">
								<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
							</button>
							<!-- /ko -->
							<button data-bind="click: $root.save" data-toggle="tooltip" title="Bewaar dit recept.">
								<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>
							</button>							
							<button data-bind="click: $root.print" data-toggle="tooltip" title="Print dit recept.">
								<span class="glyphicon glyphicon-print" aria-hidden="true"></span>
							</button>		
						</h2>
					</div>
				</div>				
			</div>		
			<table class="table table-bordered table-condensed">
				<thead>
					<th>Vooraf te bereiden?</th>
					<th>In te vriezen?</th>
					<th>Moeilijkheidsgraad</th>
					<th>Al uitgeprobeerd?</th>
					<th>Bereidingstijd</th>
					<th>Bijhorende wijn</th>
				</thead>
				<tbody>
					<tr>
						<td><span data-bind="text: vooraf"></span></td>
						<td><span data-bind="text: vriezen"></span></td>
						<td><span data-bind="text: viewDiff()"></span></td>
						<td><span data-bind="text: uitgeprobeerd"></span></td>
						<td><span data-bind="text: viewTijd()"></span></td>
						<td><span data-bind="text: wijn"></span></td>
					</tr>
				</tbody>							
			</table>
			<!-- ko if: ingred -->
			<div class="well">
				<h3>De ingredi&euml;nten:</h3>
				<p style="white-space: pre-wrap"><span data-bind="text: ingred"></span></p>
			</div>
			<!-- /ko -->
			<div class="well">
				<h3>Bereidingswijze:</h3>
				<p style="white-space: pre-wrap"><span data-bind="text: bereiding"></span></p>
			</div>
			<!-- ko if: tip -->
			<div class="well">
				<h3>Tip:</h3>
				<p style="white-space: pre-wrap"><span data-bind="text: tip"></span></p>
			</div>
			<!-- /ko -->			
		</script>

		<script id="edit" type="text/html">		
			<div class="container">
				<div class="row">
					<div class="col-xs-8">
						<h2><span data-bind="text:titel"></span></h2>
					</div>
					<div class="col-xs-4">
						<h2>
							<button data-bind="click: function() {$root.setViewMode('view')}" data-toggle="tooltip" title="Open in Lees modus">
								<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
							</button>
							<!-- ko if:receptid()>0 -->
							<button data-bind="click: $root.delete" data-toggle="tooltip" title="Verwijder dit recept.">
								<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
							</button>
							<!-- /ko -->
							<button data-bind="click: $root.save" data-toggle="tooltip" title="Bewaar dit recept">
								<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>
							</button>							
						</h2>
					</div>
				</div>				
			</div>				
			<form class="form-horizontal">
				<h3>1. Categorie</h3>
				<div class="form-group">
					<select class="form-control" data-bind="options: $root.availableCategories,
								   optionsText: 'selectName',
								   value: selectOptionCategorie" size="1"></select>
				</div>
				<div class="form-group">
					<label for="opties">Met volgende opties</label>
					<select class="form-control" data-bind="options: $root.availableTemps,
								   optionsText: 'selectName',
								   value: selectOptionTemp" size="1"></select>
					<br>
					<select class="form-control" data-bind="options: $root.availableSoorten,
								   optionsText: 'selectName',
								   value: selectOptionSoort" size="1"></select>
				</div>
				<h3>2. Overzicht</h3>
				<div class="form-group">
					<label for="inputTitel" class="col-sm-2 control-label">Titel</label>
					<div class="col-sm-10">
						<input type="text" id="inputTitel" class="form-control" data-bind="textInput: titel" />
					</div>
				</div>
				<div class="form-group">
					<label for="inputTrefwoorden" class="col-sm-2 control-label">Trefwoorden</label>
					<div class="col-sm-10">
						<input type="text" id="inputTrefwoorden" class="form-control" data-bind="textInput: trefwoord" />
					</div>
				</div>
				<div class="form-group">
					<label for="inputBron" class="col-sm-2 control-label">Bron (bv. Knack)</label>
					<div class="col-sm-10">
						<input type="text" id="inputBron" class="form-control" data-bind="textInput: bron" />
					</div>
				</div>
				<div class="form-group">
					<label for="inputVooraf" class="col-sm-2 control-label">Vooraf te bereiden?</label>
					<div class="col-sm-10">
						<label class="radio-inline">
							<input type="radio" name="inputVooraf" value="ja" data-bind="checked: vooraf">Ja
						</label>
						<label class="radio-inline">
							<input type="radio" name="inputVooraf" value="nee" data-bind="checked: vooraf">Nee
						</label>
					</div>
				</div>
				<div class="form-group">
					<label for="inputVriezen" class="col-sm-2 control-label">In te vriezen?</label>
					<div class="col-sm-10">
						<label class="radio-inline">
							<input type="radio" name="inputVriezen" value="ja" data-bind="checked: vriezen">Ja
						</label>
						<label class="radio-inline">
							<input type="radio" name="inputVriezen" value="nee" data-bind="checked: vriezen">Nee
						</label>
					</div>
				</div>
				<div class="form-group">
					<label for="inputDiff" class="col-sm-2 control-label">Moeilijkheidsgraad?</label>
					<div class="col-sm-10">
						makkelijk<--
						<input type="radio" name="inputDiff" value="20" data-bind="checked: diff">
						<input type="radio" name="inputDiff" value="30" data-bind="checked: diff">
						<input type="radio" name="inputDiff" value="40" data-bind="checked: diff">
						<input type="radio" name="inputDiff" value="50" data-bind="checked: diff">
						<input type="radio" name="inputDiff" value="60" data-bind="checked: diff">
						-->moeilijk
					</div>
				</div>			
				<div class="form-group">
					<label for="inputUitgeprobeerd" class="col-sm-2 control-label">Uitgeprobeerd?</label>
					<div class="col-sm-10">
						<label class="radio-inline">
							<input type="radio" name="inputUitgeprobeerd" value="ja" data-bind="checked: uitgeprobeerd">Ja
						</label>
						<label class="radio-inline">
							<input type="radio" name="inputUitgeprobeerd" value="nee" data-bind="checked: uitgeprobeerd">Nee
						</label>
					</div>
				</div>	
				<h3>3. Inhoud</h3>				
				<div class="form-group">					
					<strong></strong>Ingredi&euml;nten voor </strong><input type="text" id="inputPersonen" class="" data-bind="textInput: personen" /> personen.
					<div class="col-sm-12">						
						<textarea class="form-control" id="inputXPersonen" rows="10" data-bind="textInput: ingred"></textarea>
					</div>
				</div>
				<div class="form-group">
					<label for="inputWijn" class="col-sm-2 control-label">Bijhorende wijn</label>
					<div class="col-sm-10">
						<input type="text" id="inputWijn" class="form-control" data-bind="textInput: wijn" />
					</div>
				</div>
				<div class="form-group">
					<label for="inputTijd" class="col-sm-2 control-label">Bereidingstijd (min)</label>
					<div class="col-sm-10">
						<input type="text" id="inputTijd" class="form-control" data-bind="textInput: tijd" />
					</div>
				</div>
				<div class="form-group">
					<label for="inputTijd" class="col-sm-2 control-label">Bereiding</label>
					<div class="col-sm-12">
						<textarea class="form-control" rows="20" data-bind="textInput: bereiding"></textarea>
					</div>
				</div>
				<div class="form-group">
					<label for="inputTip" class="col-sm-1 control-label">Tip</label>
					<div class="col-sm-12">
						<textarea id="inputTip" class="form-control" rows="3" data-bind="textInput: tip"></textarea>
					</div>
				</div>		
				<h3>4. Opslaan</h3>		
					<h2>
						<button data-bind="click: $root.save" data-toggle="tooltip" title="Bewaar dit recept.">
							<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>
						</button>							
					</h2>
			</form>
		</script>

		
		<script type="text/javascript" src="builder.js" charset="utf-8"></script>	
	</body>	
</html>
